<template>
	<div class="chat-container">
		<!-- 聊天窗口 -->
		<el-card class="chat-window" shadow="hover">
			<div class="chat-messages" ref="messagesContainer">
				<div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
					<div class="message-content">{{ message.text }}</div>
				</div>
			</div>
		</el-card>

		<!-- 输入框 -->
		<div class="input-area">
			<el-input
				type="textarea"
				resize="none"
				v-model="newMessage"
				placeholder="请输入消息..."
				:rows="1"
				class="chat-input"
				:autosize="{ minRows: 3, maxRows: 3 }"
				@keydown.native="handleKeyDown"
				 ></el-input>
			<div class="send-button">
				<el-button circle type="primary" icon="el-icon-chat-dot-round" @click="sendMessage"></el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { ref, onMounted, nextTick } from "vue";

	export default {
		name: "AIChat",
		setup() {
			const messages = ref([{ text: "你好！我能为您做些什么？", sender: "ai" }]);
			const newMessage = ref("");
			const messagesContainer = ref(null);

			const simulateAIResponse = (userMessage) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(`AI 回复: "${userMessage}"`);
					}, 1000);
				});
			};

			const sendMessage = async () => {
				if (!newMessage.value.trim()) return;

				messages.value.push({ text: newMessage.value.trim(), sender: "user" });
				const userMessage = newMessage.value.trim();
				newMessage.value = "";
				scrollToBottom();

				const aiReply = await simulateAIResponse(userMessage);
				messages.value.push({ text: aiReply, sender: "ai" });
				scrollToBottom();
			};

			const scrollToBottom = () => {
				nextTick(() => {
					const container = messagesContainer.value;
					if (container) {
						container.scrollTop = container.scrollHeight;
					}
				});
			};

			const handleKeyDown = (event) => {
				if (event.key === "Enter" && !event.shiftKey) {
					event.preventDefault();
					sendMessage();
				}
			};

			onMounted(() => {
				scrollToBottom();
			});

			return {
				messages,
				newMessage,
				sendMessage,
				messagesContainer,
				handleKeyDown,
			};
		},
	};
</script>

<style scoped>
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 90vh;
		max-width: 600px;
		margin: 0 auto;
		padding: 16px;
		box-sizing: border-box;
	}

	.chat-window {
		flex: 1;
		overflow-y: auto;
		margin-bottom: 16px;
		padding: 8px;
	}

	.chat-window::-webkit-scrollbar {
		display: none; /* 隐藏滚动条 */
	}

	.chat-messages {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.message {
		display: flex;
		max-width: 75%;
		padding: 10px 12px;
		border-radius: 10px;
	}

	.message.user {
		align-self: flex-end;
		background-color: #007bff;
		color: #fff;
	}

	.message.ai {
		align-self: flex-start;
		background-color: #f0f0f0;
		color: #333;
	}

	.input-area {
		background-color: aliceblue;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.chat-input {
		flex: 1;
		overflow-y: hidden;
		}
	
	.chat-input ::-webkit-scrollbar {
		display: none; 
		}

	.send-button {
		display: flex;
		align-items: center;
	}
</style>